<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户中心</title>
	<link rel="stylesheet" type="text/css" href="/news/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/news/css/main.css">
    <script type="text/javascript" src="/news/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/news/js/jquery.form.min.js"></script>
    <script type="text/javascript" src="/news/js/user_pic_info.js"></script>
</head>
<body class="inframe_body">
    <form class="pic_info">
        <h3>头像设置</h3>
        <div class="form-group">
            <label class="label01">当前图像：</label>
            <img src="/news/images/user_pic.png" alt="用户图片" class="now_user_pic" id="now_user_pic">
        </div>
        <div class="form-group">
            <label>上传图像：</label>
            <input type="file" name="avatar" class="input_file"  id="upload_file" onchange="changepic(this)">
            <script>
                function changepic(){
                    //实现图片预览效果的js
                    var reads = new FileReader();
                    f = document.getElementById('upload_file').files[0];
                    reads.readAsDataURL(f);
                    reads.onload = function(e) {
                        document.getElementById('now_user_pic').src = this.result;
                    };
                };
            </script>
        </div>
        
        <div class="form-group">
            <input type="submit" value="保 存" class="input_sub">
        </div>
    </form>
</body>
</html>